<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui"
	xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ace="http://www.icefaces.org/icefaces/components"
	xmlns:icecore="http://www.icefaces.org/icefaces/core">

	<aui:layout id="l1">
		<example-cc:clipboard label="#{i18n['job-application']}" />
		<example-cc:sponsorButton />
		<example-cc:divider />
		<aui:column id="c1">
			<h:form id="f1">
				<icecore:singleSubmit />
				<h:messages globalOnly="true" layout="table" />
				<aui:fieldset id="fs1">
					<aui:column id="c1a">
						<aui:field id="firstNameField" label="#{i18n['first-name']}">
							<ace:textEntry id="firstName" required="true" requiredIndicator="*" value="#{applicantModelBean.firstName}">
								<ace:ajax render="firstNameField" />
							</ace:textEntry>
							<h:message for="firstName" />
						</aui:field>
						<aui:field id="lastNameField" label="#{i18n['last-name']}">
							<ace:textEntry id="lastName" required="true" requiredIndicator="*" value="#{applicantModelBean.lastName}">
								<ace:ajax render="lastNameField" />
							</ace:textEntry>
							<h:message for="lastName" />
						</aui:field>
						<aui:field id="emailAddressField" label="#{i18n['email-address']}">
							<ace:textEntry id="emailAddress" required="true" requiredIndicator="*" validatorMessage="#{i18n['invalid-email-address']}"
								value="#{applicantModelBean.emailAddress}">
								<f:validateRegex pattern=".+[@].+[.].+" />
								<ace:ajax render="emailAddressField" />
							</ace:textEntry>
							<h:message for="emailAddress" />
						</aui:field>
						<aui:field id="phoneNumberField" label="#{i18n['phone-number']}">
							<ace:textEntry id="phoneNumber" required="true" requiredIndicator="*" value="#{applicantModelBean.phoneNumber}">
								<ace:ajax render="phoneNumberField" />
							</ace:textEntry>
							<h:message for="phoneNumber" />
						</aui:field>
					</aui:column>
					<aui:column id="c1b">
						<aui:field id="dateOfBirthField" label="#{i18n['birthday']}">
							<ace:dateTimeEntry id="dateOfBirth" renderAsPopup="true" required="true" requiredIndicator="*"
								value="#{applicantModelBean.dateOfBirth}">
								<f:convertDateTime pattern="#{portletPreferencesValues['datePattern'][0]}" />
								<ace:ajax render="dateOfBirthField" />
							</ace:dateTimeEntry>
							<h:message for="dateOfBirth" />
						</aui:field>
						<aui:field id="cityField" label="#{i18n['city']}">
							<ace:textEntry id="city" required="true" requiredIndicator="*" value="#{applicantModelBean.city}">
								<ace:ajax render="cityField" />
							</ace:textEntry>
							<h:message id="cityMessage" for="city" />
						</aui:field>
						<aui:field id="provinceIdField" label="#{i18n['state-province']}">
							<h:selectOneMenu id="provinceId" required="true" requiredIndicator="*" value="#{applicantModelBean.provinceId}">
								<f:selectItem itemLabel="#{i18n['select']}" itemValue="" />
								<f:selectItems itemValue="#{province.provinceId}" itemLabel="#{province.provinceName}"
									value="#{listModelBean.provinces}" var="province" />
							</h:selectOneMenu>
							<h:message id="provinceIdMessage" for="provinceId" />
						</aui:field>
						<aui:field id="postalCodeField" label="#{i18n['zip-postal']}">
							<ace:textEntry id="postalCode" required="true" requiredIndicator="*" value="#{applicantModelBean.postalCode}"
								valueChangeListener="#{applicantBackingBean.postalCodeListener}">
								<ace:ajax render="postalCodeField provinceIdField cityField" />
							</ace:textEntry>
							<img src="#{resource['example:icon-help.png']}" title="#{i18n['postal-code-hint']}" />
							<h:message id="postalCodeMessage" for="postalCode" />
						</aui:field>
					</aui:column>
				</aui:fieldset>
				<aui:fieldset>
					<aui:column>
						<aui:field id="commentsField" label="#{i18n['comments']}">
							<h:panelGroup id="showHide" layout="block">
								<h:commandLink actionListener="#{applicantBackingBean.toggleComments}" immediate="true"
									rendered="#{!applicantBackingBean.commentsRendered}" value="#{i18n['show']} #{i18n['comments']}" />
								<h:commandLink actionListener="#{applicantBackingBean.toggleComments}" immediate="true"
									rendered="#{applicantBackingBean.commentsRendered}" value="#{i18n['hide']} #{i18n['comments']}" />
							</h:panelGroup>
							<ace:textAreaEntry id="comments" cols="50" rows="10" rendered="#{applicantBackingBean.commentsRendered}"
								value="#{applicantModelBean.comments}">
								<ace:ajax render="@this" />
							</ace:textAreaEntry>
						</aui:field>
					</aui:column>
				</aui:fieldset>
				<hr />
				<h:commandButton action="#{applicantBackingBean.submit}" value="#{i18n['submit']}" />
			</h:form>
		</aui:column>
		<aui:column id="c2">
			<h:form id="f1">
				<aui:column id="c2a" styleClass="uploaded-files">
					<h:messages globalOnly="true" layout="table" />
					<ace:confirmationDialog id="confirmDialog" header="#{i18n['confirmation']}" modal="true" widgetVar="confirmation"
						message="#{i18n['are-you-sure-you-want-to-delete-this']}" width="400" height="100" closable="false"
						position="center">
						<h:commandButton actionListener="#{applicantBackingBean.deleteUploadedFile}" onclick="confirmation.hide()"
							value="#{i18n['yes']}" />
						<h:commandButton onclick="confirmation.hide()" value="#{i18n['no']}" />
					</ace:confirmationDialog>
					<h3>#{i18n['attachments']}</h3>
					<ace:dataTable value="#{applicantModelBean.uploadedFiles}" var="uploadedFile">
						<ace:column>
							<h:commandButton id="showDialogButton" image="#{resource['example:icon-delete.png']}"
								onclick="confirmation.show()">
								<f:setPropertyActionListener value="#{uploadedFile.id}" target="#{applicantBackingBean.uploadedFileId}" />
							</h:commandButton>
						</ace:column>
						<ace:column headerText="#{i18n['file-name']}">
							<h:outputText value="#{uploadedFile.name}" />
						</ace:column>
						<ace:column headerText="#{i18n['size']}">
							<h:outputText value="#{uploadedFile.size}" />
						</ace:column>
					</ace:dataTable>
					<ace:fileEntry id="fileEntryComp" absolutePath="#{applicantBackingBean.fileUploadAbsolutePath}"
						fileEntryListener="#{applicantBackingBean.handleFileUpload}" />
					<h:commandButton value="#{i18n['add-attachment']}" />
				</aui:column>
			</h:form>
		</aui:column>
	</aui:layout>

</ui:composition>
